﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bing Maps Canvas Layer - Extended Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <div id='mapDiv' style="width:100%; height: 100%;"></div>
    <script type="text/javascript" src="js/jscache.min.js"></script>
    <script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?callback=GetMap" async defer></script>
    <script type="text/javascript">
        
    function GetMap()
    {
        var MM = Microsoft.Maps;
        var map = new MM.Map(document.getElementById("mapDiv"), {
            center: new MM.Location(0,0),
            mapTypeId: MM.MapTypeId.road,
            zoom: 1,
            credentials:"YOUR CREDENTIALS"
        }) ;
        
        MM.registerModule("CanvasTileLayerModule", "js/CanvasTileLayerModule.js");
        MM.loadModule("CanvasTileLayerModule", {
            callback: function () {
                var sampleData = Microsoft.Maps.TestDataGenerator.getLocations(30000);
                new CanvasTileLayer(map,
                        {
                            debugMode: false,
                            cacheTiles: true,
                            drawTile: function(context, tile) {

                                for (var i = 0; i < sampleData.length; i++) {

                                    var canvasPixel = tile.getLocationPixelOffset(sampleData[i]);

                                    var squareSize = 5; //in pixels


                                    //don't draw coordinates outside of the tile, taking into account the square size
                                    if(canvasPixel.x < 0 - (squareSize / 2) ||
                                       canvasPixel.x > 256 + (squareSize / 2) ||
                                       canvasPixel.y < 0 - (squareSize / 2) ||
                                       canvasPixel.y > 256 + (squareSize / 2)) {
                                        continue;
                                    }

                                    context.fillStyle = "red";
                                    context.fillRect(canvasPixel.x, canvasPixel.y, squareSize, squareSize);
                                }
                            }
                        });
            }});
    }

    //function drawTile(context, tile) {

    //    var radius = 5;
    //    var diameter = radius *2;

    //    for (var i = 0; i < points.length; i++) {

    //        var canvasPixel = tile.getLocationPixelOffset(points[i]);
    //        var x = canvasPixel.x;
    //        var y = canvasPixel.y;

    //        if(canvasPixel.x < -diameter || canvasPixel.x > 256 + diameter || canvasPixel.y < -diameter || canvasPixel.y > 256 + diameter) {
    //            continue;
    //        }

    //        // Circle
    //        context.beginPath();
    //        context.arc(x, y, radius, 0, 2 * Math.PI, false);

    //        // Fill (Gradient)
    //        var grd = context.createRadialGradient(x, y, 5, x, y, radius);
    //        grd.addColorStop(0, "#8ED6FF");
    //        grd.addColorStop(1, "#004CB3");
    //        context.fillStyle = grd;

    //        // Shadow
    //        context.shadowColor = "#666666";
    //        context.shadowBlur = 5;
    //        context.shadowOffsetX = 7;
    //        context.shadowOffsetY = 7;
    //        context.fill()

    //        context.lineWidth = 2;
    //        context.strokeStyle = "black";
    //        context.stroke();

    //        // Text
    //        context.lineWidth = 1;
    //        context.fillStyle = "#000000";
    //        context.lineStyle = "#000000";
    //        context.font = "12px sans-serif";
    //        context.textAlign = "center";
    //        context.textBaseline = "middle";
    //        context.fillText((i + 1).toString(), x, y);
    //    }
    //}
    </script>
</body>
</html>